<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 表单 </el-breadcrumb-item>
                <el-breadcrumb-item>编辑菜单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form label-width="100px">
                    <el-form-item label="菜单树展示">
                        <el-tree
                            :data="data"
                            show-checkbox
                            node-key="id"
                            default-expand-all
                            :expand-on-click-node="false"
                            :render-content="renderContent"
                            :props="defaultProps"
                        >
                        </el-tree>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="40%" @close="closeDialog">
            <el-form ref="form" :model="form" label-width="70px">
               
                <div v-if="updatePermMenu.typeLevel == 1">
                        <el-form-item label="路由索引">
                            <el-input style="width: 220px" v-model="updatePermMenu.index"></el-input>
                        </el-form-item>
                        <div v-if="updatePermMenu.icon!=null">
                        <el-form-item label="图片样式">
                        <el-input style="width: 220px" v-model="updatePermMenu.icon"></el-input>
                        </el-form-item>
                    </div>
                        <el-form-item label="菜单标题">
                            <el-input style="width: 220px" v-model="updatePermMenu.title"></el-input>
                        </el-form-item>
                    </div>

                    <div v-if="updatePermMenu.typeLevel == 2">
                        <el-form-item label="权限值">
                            <el-input style="width: 220px" v-model="updatePermMenu.permVal"></el-input>
                        </el-form-item>
                        <el-form-item label="权限名字">
                            <el-input style="width: 220px" v-model="updatePermMenu.title"></el-input>
                        </el-form-item>
                    </div>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button>取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>



        <!-- 添加弹出框 -->
        <el-dialog title="添加" :visible.sync="editVisibleAdd" width="40%" @close="closeDialog">
            <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="添加选择">
                        <!-- 单选框是添加菜单还是添加权限 -->
                        <el-radio v-model="permMenu.typeLevel" label="1">添加菜单</el-radio>
                        <el-radio v-model="permMenu.typeLevel" label="2">添加权限</el-radio>
                    </el-form-item>

                    <div v-if="permMenu.typeLevel == 1">
                        <!-- 下拉列表显示所有的爹 -->
                        <el-form-item label="父亲菜单">
                            <el-input disabled style="width: 220px" v-model="form.parentTitle"></el-input>
                        </el-form-item>
                        <el-form-item label="路由索引">
                            <el-input style="width: 220px" v-model="permMenu.routerIndex"></el-input>
                        </el-form-item>
                        <el-form-item label="图片样式">
                            <el-input style="width: 220px" v-model="permMenu.icon"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单标题">
                            <el-input style="width: 220px" v-model="permMenu.title"></el-input>
                        </el-form-item>
                    </div>

                    <!-- 这一段显示的是权限 -->
                    <div v-if="permMenu.typeLevel == 2">
                        <el-form-item label="菜单">
                            <el-input disabled style="width: 220px" v-model="form.parentTitle"></el-input>

                        </el-form-item>
                        <el-form-item label="权限值">
                            <el-input style="width: 220px" v-model="permMenu.permVal"></el-input>
                        </el-form-item>
                        <el-form-item label="权限名字">
                            <el-input style="width: 220px" v-model="permMenu.title"></el-input>
                        </el-form-item>
                    </div>
                </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button>取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import bus from '../common/bus';
export default {
    name: 'baseform',
    data() {
        return {
            updatePermMenu:{},
            form:{},
            saveMenuName:'',
            data: [],
            title: '',
            nodeData: {},
            editVisible: false,
            editVisibleAdd:false,
            defaultProps: {
                children: 'subs',
                label: 'title'
            },
            menuId: '',
            node: {},
            permMenu:{
                parentId:-100,
                permVal:'',
                routerIndex:'',
                icon:'',
                typeLevel:1,
                title:''
            }
        };
    },
    created() {
        this.initMenu();
    },
    methods: {
        closeDialog(){

        },
        saveEdit() {
            //在这里需要发送请求到服务器
            this.$axios
                .get('/api/permMenus/updatePermAndMenu.action', {
                    params: {
                        menuId: this.updatePermMenu.menuId,
                        title: this.updatePermMenu.title,
                        icon:this.updatePermMenu.icon,
                        permVal:this.updatePermMenu.permVal,
                        routerIndex:this.updatePermMenu.index,
                        typeLevel:this.updatePermMenu.typeLevel, 
                    }
                })
                .then(
                    (resp) => {
                        if (!resp.data.code) {
                            this.nodeData.title = this.title;
                            this.editVisible = false;
                            this.initMenu();
                        } else {
                            this.$message.error('更新菜单名失败');
                        }
                    },
                    (error) => {
                        this.$message.error('更新菜单名失败:' + error.message);
                    }
                );
        },
        //初始化菜单
        initMenu() {
            //发送请求初始化我们的菜单
            this.$axios.get('/api/permMenuService/permMenu/list.action').then(
                (resp) => {
                    if (!resp.data.code) {
                        this.data = resp.data.dataMap.menuList;
                    } else {
                        this.$message.error('初始化菜单信息失败');
                    }
                },
                (error) => {
                    this.$message.error('初始化菜单信息失败:' + error.message);
                }
            );
        },


        remove(node, data) {
            //发送请求到数据库删除这个数据
            this.$axios
                .get('/api/permMenuService/permMenu/deleteMenuByMenuId.action', {
                    params: {
                        menuId: data.menuId
                    }
                })
                .then(
                    (resp) => {
                        if (!resp.data.code) {
                            // 下面是删除前端视图上的这个数据
                            // const parent = node.parent;
                            // const children = parent.data.subs || parent.data;
                            // const index = children.findIndex((d) => d.menuId === data.menuId);
                            // children.splice(index, 1);
                            this.initMenu();
                        } else {
                            this.$message.error('删除数据失败');
                        }
                    },
                    (error) => {
                        this.$message.error('删除数据失败');
                    }
                );
        },



        save(){
            //这里还需要去进行类型的传递

            //这里我们就需要调用这个add方法
            //向数据库发送请求添加这个菜单 他爹是谁呢?
            console.log(this.nodeData);
            this.$axios.get("/api/permMenuService/permMenu/addPermAndMenu.action",{
                params:this.permMenu
            })
            .then(
                resp=>{
                    if(!resp.data.code){
                        //说明成功请求
                        //首先弹出框应该消失
                        this.editVisibleAdd=false;
                        //还应该：将这个菜单设置到指定的位置
                        this.initMenu();
                    }else{
                        //添加失败
                        this.$message.success('添加菜单信息失败:'+resp.data.message);
                    }
                    //就是在这里需要将数据清空
                    this.form={}

                },
                error=>{
                    //添加失败
                    this.$message.success('添加菜单信息失败:'+error.message);
                    this.form={}
                }
            )
        },
        /**
         * 
         * @param node ：节点(当前点击的这个节点)
         * @param data ：是当前点击这一行的数据
         */
        add(node, data) {
            this.permMenu={
                parentId:-100,
                permVal:'',
                routerIndex:'',
                icon:'',
                typeLevel:1,
                title:''
            }
            //这个置空的目的是为了防止数据混乱 比如第一次点击了A 第二次点击了B 如果没有置空的话 还会使用第一次的数据
            this.nodeData={}
            this.form={}
            //是不是需要弹出个框
            //让这个添加数据的这个弹出框弹出来
            this.editVisibleAdd = true;
            //将这个点击这一行的标题赋值给这个全局对象
            this.title = data.title;
            //这里需要拿到这个数据
            //当前的菜单id记录下来 要添加数据的这个新数据的爹记录下来...
            this.menuId = data.menuId;
            this.permMenu.parentId=this.menuId;
            //首先是要弹出这个对话框  然后修改这个内容  //然后从新设置这个值
            // console.log('node:' + node);
            // console.log('data:' + data.id); //这里的数据是可以找到的
            // data.label = '小波波修改';
            this.nodeData = data;
            this.form.parentTitle=this.nodeData.title;
          
        },
        //更新数据
        update(node, data) {
            //是不是需要弹出个框
            this.editVisible = true;
            this.title = data.title;
            //这里需要拿到这个数据
            this.menuId = data.menuId;
            //首先是要弹出这个对话框  然后修改这个内容  //然后从新设置这个值
            // console.log('node:' + node);
            // console.log('data:' + data.id); //这里的数据是可以找到的
            // data.label = '小波波修改';
            this.nodeData = data;
            //这里涉及到取消的问题
            this.backUpdatePermMenu={...data};
            this.updatePermMenu=data;
        },
        renderContent(h, { node, data, store }) {
            return (
                <span class="custom-tree-node">
                    <span>{node.label}</span>
                    <span>
                        <el-button size="mini" type="text" on-click={() => this.remove(node, data)}>
                            删除
                        </el-button>
                        <el-button size="mini" type="text" on-click={() => this.update(node, data)}>
                            更新
                        </el-button>
                        <el-button size="mini" type="text" on-click={() => this.add(node, data)}>
                            添加
                        </el-button>
                    </span>
                </span>
            );
        }
    }
};
</script>